<template>
  <div class="base-header">
    <!-- left -->
    <div>
      <!-- logo -->
      <div class="logo" @click="$router.push(homePath)"></div>
    </div>
    <!-- center -->
    <div class="flex--1"></div>
    <!-- right -->
    <div class="flex--1 h--right">
      <base-menus></base-menus>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import baseMenus from "./base-menus.vue"
import {HomePath} from "@/config/router.config"
export default defineComponent({
  components:{baseMenus},
  computed:{
    homePath(){return HomePath}
  }
})
</script>

<style lang="scss" scoped>
.base-header{
  position:relative;
  z-index: 99;
  height:64px;
  padding:0 24px;
  overflow:hidden;
  display:flex;
  justify-content: space-between;
  align-items: center;
  background-image:linear-gradient(45deg,#efefef,#888,#696969);
  .h--right{
    min-width:1000px;
    >div{
      width:100%;
    }
  }
}
</style>
